WebXR হল একটি API যা ওয়েব ব্রাউজারে ভার্চুয়াল রিয়ালিটি (VR) এবং অগমেন্টেড রিয়ালিটি (AR) অভিজ্ঞতা প্রদান করতে ব্যবহৃত হয়। BabylonJS এ WebXR ক্যামেরা এবং কন্ট্রোলার ইন্টিগ্রেশন খুবই সহজ, যা ব্যবহারকারীদের immersive VR বা AR অভিজ্ঞতা প্রদান করে।
BabylonJS এর মাধ্যমে WebXR ক্যামেরা এবং কন্ট্রোলার ব্যবহার করে আপনি VR বা AR গেম তৈরি করতে পারেন, যেখানে ব্যবহারকারী ভার্চুয়াল পরিবেশের মধ্যে ঘুরতে পারে, অবজেক্ট ইন্টারঅ্যাক্ট করতে পারে, এবং বিভিন্ন কন্ট্রোলার ব্যবহার করতে পারে।
WebXR ক্যামেরা সেটআপ
WebXR ক্যামেরা WebXRCamera নামে পরিচিত এবং এটি VR বা AR অভিজ্ঞতার জন্য ব্যবহৃত হয়। এই ক্যামেরা স্বয়ংক্রিয়ভাবে VR বা AR ডিভাইসের সাথে সংযুক্ত হয় এবং সেই অনুযায়ী দৃশ্যের পজিশন ও দৃষ্টিকোণ নিয়ন্ত্রণ করে।
উদাহরণ: WebXR ক্যামেরা সেটআপ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS WebXR Camera</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
// WebXR ক্যামেরা তৈরি
var xrHelper;
var camera = new BABYLON.WebXRCamera("WebXRCamera", BABYLON.Vector3.Zero(), scene);
// XR সাপোর্ট চেক করা
BABYLON.WebXRExperienceHelper.CreateAsync(scene).then(function (xr) {
xrHelper = xr;
// VR এনাবল করা
xrHelper.enterXRAsync(BABYLON.WebXRSessionMode.EXPLORER, BABYLON.WebXRReferenceSpaceType.LOCAL);
});
// আলোর উৎস তৈরি
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
light.intensity = 0.7;
// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.z = 5;
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- WebXRCamera: এটি WebXR ভিত্তিক ক্যামেরা, যা VR বা AR ডিভাইসের সাথে সংযুক্ত থাকে এবং ব্যবহারকারীর দৃষ্টিকোণ অনুযায়ী পরিবেশ দেখায়।
- CreateAsync:
BABYLON.WebXRExperienceHelper.CreateAsyncব্যবহার করে WebXR সহায়ক সিস্টেম তৈরি করা হয়, যা VR বা AR মোডে প্রবেশ করতে সক্ষম করে।
এটি ব্যবহারকারীদের VR বা AR ডিভাইস থেকে সরাসরি WebXR অভিজ্ঞতা প্রদান করবে।
WebXR কন্ট্রোলার
WebXR API তে controllers ব্যবহারকারীদের জন্য ভার্চুয়াল রিয়ালিটিতে অবজেক্ট বা পরিবেশের সাথে ইন্টারঅ্যাক্ট করার একটি গুরুত্বপূর্ণ উপাদান। এই কন্ট্রোলারগুলি ব্যবহারকারীকে ভার্চুয়াল পরিবেশের মধ্যে অবজেক্ট ধরতে, সরাতে বা ইন্টারঅ্যাক্ট করতে সাহায্য করে।
উদাহরণ: WebXR কন্ট্রোলার সেটআপ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS WebXR Controllers</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
// WebXR ক্যামেরা তৈরি
var xrHelper;
var camera = new BABYLON.WebXRCamera("WebXRCamera", BABYLON.Vector3.Zero(), scene);
BABYLON.WebXRExperienceHelper.CreateAsync(scene).then(function (xr) {
xrHelper = xr;
// VR এনাবল করা
xrHelper.enterXRAsync(BABYLON.WebXRSessionMode.EXPLORER, BABYLON.WebXRReferenceSpaceType.LOCAL);
// কন্ট্রোলার সেটআপ
xrHelper.input.addControllerMeshTask("controller", ["left", "right"]).then(function (result) {
var leftController = result.controllers.left;
var rightController = result.controllers.right;
// কন্ট্রোলারের ইভেন্ট লিস্টেনার
leftController.onButtonStateChangedObservable.add(function (button) {
if (button.pressed) {
console.log("Left controller button pressed");
}
});
rightController.onButtonStateChangedObservable.add(function (button) {
if (button.pressed) {
console.log("Right controller button pressed");
}
});
});
});
// আলোর উৎস তৈরি
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
light.intensity = 0.7;
// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.z = 5;
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- xrHelper.input.addControllerMeshTask: এটি VR কন্ট্রোলারের জন্য মেশ লোড করতে ব্যবহৃত হয়, যা ইউজারের হাতের কন্ট্রোলার বা ইন্টারঅ্যাক্টিভ ডিভাইসকে দৃশ্যের মধ্যে দেখাবে।
- onButtonStateChangedObservable: এই ফাংশনটি কন্ট্রোলার বোতামের অবস্থা (যেমন, চাপা বা মুক্ত) ট্র্যাক করতে ব্যবহার করা হয়। এটি ব্যবহারকারী কন্ট্রোলারের সঙ্গে ইন্টারঅ্যাক্ট করলে সেই ইভেন্টে কাজ করবে।
WebXR ক্যামেরা এবং কন্ট্রোলারের সুবিধা
- Immersive অভিজ্ঞতা: WebXR ক্যামেরা এবং কন্ট্রোলার ব্যবহারকারীদের ভার্চুয়াল পরিবেশে আরও বেশি ইমার্সিভ অভিজ্ঞতা প্রদান করে।
- মাল্টি-প্ল্যাটফর্ম সমর্থন: এটি বিভিন্ন VR এবং AR ডিভাইসের সাথে কাজ করে, যেমন Oculus Rift, HTC Vive, এবং আরও।
- অভিযোজ্যতা: আপনি সহজে VR বা AR অ্যাপ্লিকেশন তৈরি করতে পারেন যা ডেস্কটপ ব্রাউজার, মোবাইল ডিভাইস এবং VR হেডসেটগুলোর সঙ্গে ইন্টিগ্রেটেড থাকে।
সারাংশ
BabylonJS এর WebXR ক্যামেরা এবং কন্ট্রোলার ইন্টিগ্রেশন আপনাকে ভার্চুয়াল রিয়ালিটি এবং অগমেন্টেড রিয়ালিটির অভিজ্ঞতা তৈরি করতে সাহায্য করে। WebXRCamera ক্যামেরা VR/AR ডিভাইসের সাথে সংযুক্ত হয়ে ব্যবহারকারীর দৃষ্টিকোণ নিয়ন্ত্রণ করে, এবং controllers ভার্চুয়াল পরিবেশের সাথে ইন্টারঅ্যাক্ট করতে সাহায্য করে। এই সিস্টেমগুলো ব্যবহার করে আপনি শক্তিশালী এবং ইমার্সিভ 3D অ্যাপ্লিকেশন তৈরি করতে পারবেন।
Read more
